<template>
  <div>
    <ul>
      <template v-if="lists == null">
        <li>加载中...</li>
      </template>
      <template v-else>
        <!-- <li @click="godetail(item.id)" v-for="item in news.newslist" :key="item.id">{{ item.title }}</li> -->
        <li @click="godetail(item.id)" v-for="item in lists" :key="item.id">{{ item.title }}</li>
      </template>
    </ul>
    <hr />
    <router-link to="/count">计数器</router-link>
  </div>
</template>

<script>
// 使用辅助函数方式来读取和操作vuex中的数据和方法
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    // 开启强制的命名空间
    // 参数1：就是moudles中的key的名称
    // 参数2：对象或数组
    // ...mapState('news',['newslist'])
    // ...mapState('news', {
    //   newslist: state => state.newslist
    //   // newslist: ({ newslist }) => newslist
    // })

    // mapGetters中的元素它就是getters对象方法的名称
    // ...mapGetters('news', ['lists'])
    ...mapGetters('news',{
      // key自定义在当前组件中定义的名称，value就是在getters配置中的方法名称
      lists: 'lists'
    })
  },
  created() {
    // 有多条记录
    this.$store.dispatch('news/fetchNewsList', 1)
  },
  methods: {
    godetail(id) {
      this.$router.push({
        name: 'xw',
        params: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
